* {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

/*为什么要将背景图片设置成body的背景，之前是设置成index这个div的，如果设置成div的背景图片那么在缩放浏览器时背景图片会随着div的缩小而缩小*/
body {
    /*这里在css设置背景图片，如果使用 img 标签进行设置的话，会遮盖掉其它元素*/
    /*背景1：https://z3.ax1x.com/2021/06/02/2MsfsS.jpg*/
    /*背景2：https://z3.ax1x.com/2021/06/02/2MxLpn.jpg*/
    background: url("https://z3.ax1x.com/2021/06/24/RQlql8.jpg") no-repeat center center fixed;
    z-index: 1;
    /*这个是保证背景图片不会被放大*/
    /*同时使用-webkit-background-size: cover和-o-background-size: cover兼容webkit内核浏览器和Opera浏览器*/
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#index {
    z-index: 2;
    display: block;
}

#search_div {
    margin: 0 auto;
    height: 1920px;
    width: 937px;
    z-index: 4;
    text-align: center;
}

#search_input {
    width: 500px;
    height: 40px;
    background-color: rgba(50, 50, 50, 0.7);
    border: none;
    /*去除输入框聚焦时出现的外边框*/
    outline: none;
    border-radius: 40px;
    text-align: center;
    font-size: 14px;
    font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
    color: #898989;
    animation-delay: 0.9s;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes si {
    from {
    }
    to {
        -webkit-box-shadow: 5px 4px 5px #262626;
        -moz-box-shadow: 5px 4px 5px #262626;
        box-shadow: -1px 4px 5px #262626;
    }
}

.mask_layer {
    /*这个是保证背景图片不会被放大缩小*/
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 3;
}

#time_div {
    margin-top: 20%;
    z-index: 4;
    text-align: center;
    margin-bottom: 10px;
}

#hours_span, #minute_span, #second_span {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 40px;
    color: rgba(245, 245, 245, 0);
    animation-delay: 0.5s;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    cursor: pointer;
}

@keyframes hms {
    from {
        color: rgba(255, 255, 255, 0);
    }
    to {
        color: rgba(255, 255, 255, 1);
    }
}

#key_word_show {
    margin: 20px auto;
    width: 500px;
    background-color: rgba(50, 50, 50, 0.7);
    border-radius: 30px;
    z-index: 4;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

/**
   关键字检索列表展开开始动画
 */
@keyframes kws {
    from {
        height: 0px
    }
    to {
        height: 365px
    }
}

/**
     关键字检索列表展开结束动画
   */
@keyframes kws2 {
    from {
        height: 365px
    }
    to {
        height: 0px
    }
}

#key_word_show ul {
    cursor: pointer;
}

#key_word_show ul li {
    color: #979797;
    margin-top: 14px;
    margin-bottom: 15px;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    list-style: none;
    font-size: 15px;
    cursor: pointer;
}

@keyframes kwsl {
    from {
    }
    to {
        background-color: gray;
        border-radius: 10px;
        color: #181818;
        font-weight: bold;
    }
}

@keyframes kwsl2 {
    from {
        background-color: gray;
        border-radius: 10px;
        color: #181818;
        font-weight: bold;
    }
    to {
    }
}

.search_input_div {
    position: relative;
}

#navigation_icon {
    position: absolute;
    left: 0;
    background-image: url("https://z3.ax1x.com/2021/06/21/RE58oV.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
    width: 35px;
    height: 35px;
    background-size: 35px 35px;
    margin-left: 230px;
    margin-top: 4px;
    cursor: pointer;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

#week_span {
    margin: 0px auto;
    width: 80px;
    height: 20px;
    display: block;
    font-size: 10px;
    color: rgba(245, 245, 245, 0);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    animation-fill-mode: forwards;
    animation-delay: 0.8s;
    animation-duration: 0.5s;
}

@keyframes ws {
    from {
        color: rgba(245, 245, 245, 0);
    }
    to {
        color: rgba(245, 245, 245, 1);
    }
}

#navigation_words {
    list-style: none;
    margin-top: 5px;
    font-size: 10px;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-name: nw;
}

@keyframes nw {
    0% {
        color: rgba(185, 193, 185, 1);
    }
    10% {
        color: rgba(185, 193, 185, 0.9);
    }
    20% {
        color: rgba(185, 193, 185, 0.8);
    }
    30% {
        color: rgba(185, 193, 185, 0.7);
    }
    40% {
        color: rgba(185, 193, 185, 0.6);
    }
    50% {
        color: rgba(185, 193, 185, 0.5);
    }
    60% {
        color: rgba(185, 193, 185, 0.4);
    }
    70% {
        color: rgba(185, 193, 185, 0.3);
    }
    80% {
        color: rgba(185, 193, 185, 0.2);
    }
    90% {
        color: rgba(185, 193, 185, 0.1);
    }
    100% {
        color: rgba(185, 193, 185, 0);
    }
}

@keyframes nw2 {
    0% {
        color: rgba(185, 193, 185, 0);
    }
    10% {
        color: rgba(185, 193, 185, 0.1);
    }
    20% {
        color: rgba(185, 193, 185, 0.2);
    }
    30% {
        color: rgba(185, 193, 185, 0.3);
    }
    40% {
        color: rgba(185, 193, 185, 0.4);
    }
    50% {
        color: rgba(185, 193, 185, 0.5);
    }
    60% {
        color: rgba(185, 193, 185, 0.6);
    }
    70% {
        color: rgba(190, 190, 190, 0.7);
    }
    80% {
        color: rgba(200, 200, 200, 0.8);
    }
    90% {
        color: rgba(220, 220, 220, 0.9);
    }
    100% {
        color: rgba(220, 220, 220, 1);
    }
}

#menu_div {
    position: absolute;
    width: 400px;
    height: 500px;
    background-color: rgba(10, 10, 10, 0.6);
    z-index: 4;
    bottom: 0px;
    right: 0px;
    margin-right: -405px;
    margin-bottom: 5px;
    border-radius: 10px;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

@keyframes md {
    from {
        margin-right: -405px;
    }
    to {
        margin-right: 5px;
    }
}

@keyframes md2 {
    from {
        margin-right: -5px;
    }
    to {
        margin-right: -405px;
    }
}

#menu_title_div {
    width: 100%;
    height: 35px;
    text-align: center;
    background: rgba(50, 50, 50, 1);
    /*实现毛玻璃效果*/
    /*filter:blur(20px);*/
    /*-webkit-filter:blur(20px);*/
    /*-moz-filter:blur(20px);*/
    /*-ms-filter:blur(20px);*/
    /*-o-filter:blur(20px);*/
}

#menu_title_div span {
    display: inline-block;
    margin-top: 8px;
    font-size: 15px;
    color: #dedede;
    font-weight: bold;
}

#title_div {
    width: 20px;
    height: 20px;
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    /*
    https://z3.ax1x.com/2021/06/22/RZ1uD0.png
    https://z3.ax1x.com/2021/06/22/RZ33eP.png
    https://z3.ax1x.com/2021/06/22/RZ8atO.png
    菜单图标
    */
    /*background-image: url("https://z3.ax1x.com/2021/06/22/RZ8atO.png");*/
    background-size: 20px 20px;
    cursor: pointer;
}

#close_div {
    width: 20px;
    height: 20px;
    float: right;
    margin-right: 10px;
    margin-top: 8px;
    background-image: url("https://z3.ax1x.com/2021/06/22/RZGiE6.png");
    background-size: 20px 20px;
    cursor: pointer;
}

#menu_navigation_div {
    position: absolute;
    width: 100%;
    height: 40px;
    text-align: center;
    background: rgba(50, 50, 50, 1);
    bottom: 0px;
}

#menu_navigation_div button {
    width: 90px;
    height: 35px;
    display: inline-block;
    float: left;
    text-align: center;
    border: none;
    background-color: rgba(10, 10, 10, 0);
    cursor: pointer;
    transform: scale(1);
    transition: transform 0.3s ease 0s;
}

#menu_navigation_div :not(:first-child,:last-child) {
    margin-left: 15px;
}

#menu_navigation_div button img {
    width: 22px;
    height: 22px;
    margin-top: 5px;
}

#menu_show_div {
    position: absolute;
    width: 500px;
    height: 430px;
    top: 35px;
}

#menu_show_iframe {
    width: 100%;
    height: 100%;
    border: none;
    animation-duration: 0.5s;
}
